<template>
    <ul class="list">
        <li v-for="l in list" :key="l.letter">
            <ul class="item-list">
                <li v-for="(item, index) in l.data" :key="item.id" @click="onclickItemHandler(props.level, item)"
                    :class="['item', checkId === item.id ? 'focus' : '']">
                    <span class="letter" v-html="index === 0 ? l.letter.toUpperCase() : '&nbsp;'"></span>{{ item.name }}
                </li>
            </ul>
        </li>
    </ul>
</template>

<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: () => {
            return [];
        }
    },
    checkId: {
        type: [Number, String],
        default: '-1'
    },
    level: {
        type: [Number, String],
        default: '0'
    }
})

const emit = defineEmits(['on-check'])


function onclickItemHandler (level, item) {
    emit('on-check', { level, item });
}


</script>

<style lang="scss" scoped>
$primary-color: var(--srt-color-primary);
.list {
    list-style: none;
    padding: 0px;
    margin: 0px;
    .item {
        cursor: pointer;
        padding: 5px 0 5px 16px;
        display: flex;

        &.focus {
            background: $primary-color;
            color: var(--srt-color-white);
        }

        .letter {
            display: inline-block;
            width: 16px;
            margin-right: 8px;
            text-align: center;
        }
    }
}
</style>
